import React, { useState } from 'react';
import { HashRouter, Routes, Route, useLocation } from 'react-router-dom';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { navItems } from './nav-items';
import Sidebar from './components/Sidebar';

const queryClient = new QueryClient();

// 内部组件，用于根据路由决定是否显示侧边栏
const AppContent = () => {
  const [sidebarOpen, setSidebarOpen] = useState(false);
  const location = useLocation();

  // 定义不需要显示侧边栏的路由
  const noSidebarRoutes = ['/authority/login'];
  
  // 检查当前路由是否需要隐藏侧边栏
  const shouldHideSidebar = noSidebarRoutes.includes(location.pathname);

  const toggleSidebar = () => {
    setSidebarOpen(!sidebarOpen);
  };

  return (
    <div className="flex h-screen bg-material-grey-50">
      {/* 只在非登录页面显示侧边栏 */}
      {!shouldHideSidebar && (
        <Sidebar isOpen={sidebarOpen} onToggle={toggleSidebar} />
      )}
      
      {/* 主内容区域 */}
      <div className={`flex-1 flex flex-col overflow-hidden ${shouldHideSidebar ? '' : 'lg:ml-0'}`}>
        <Routes>
          {navItems.map(({ to, page }) => (
            <Route key={to} path={to} element={
              shouldHideSidebar ? page : React.cloneElement(page, { toggleSidebar })
            } />
          ))}
        </Routes>
      </div>
    </div>
  );
};

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <HashRouter>
        <AppContent />
      </HashRouter>
    </QueryClientProvider>
  );
}

export default App;
